<template>
  <div class="patient-info-page">
    <div class="bed-info">
      为便于接受全方位的护理工作，请填写您的真实信息
    </div>

    <div class="flex1">
      <template v-for="(item, index) in patientInfo" :key="index">
        <InfoItem
          :ref="setInfoItemRef"
          :item-data="item"
          v-if="item.isShow"
        />
      </template>
    </div>
    <div class="patient-info-btn">
      <van-button
        block
        type="success"
        @click="onSubmit"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Toast } from 'vant';
import { useUserInfo } from '@/hooks/store';
import { useService } from '@/utils/services';
import process from '@/logic/process';
import InfoItem from './components/InfoItem';

export default {
  components: {
    InfoItem
  },
  setup() {
    const userInfo = useUserInfo();

    const actions = useService();

    const patientInfo = ref([]);

    Promise.all([actions.hos.getEducationConfig(), actions.hos.getPatientInfo()]).then(
      ([configs, info]) => {
        let result = { ...info.userInfo, ...info.visitInfo };
        patientInfo.value = configs.map((item) => {
          // 与患者关系
          if (['patientFormRelationWithPatient', 'educationLevel'].includes(item.field)) {
            let opt = item.options.find((option) => option.id == result[item.field]);
            item.value = opt?.text || '';
            item.id = opt?.id || undefined;
          } else if (['marks'].includes(item.field)) {
            // 标记组
            item.value = result[item.field].length
              ? result[item.field]?.map((item) => item.name)?.join(',') || ''
              : '';
            item.id = result[item.field]?.map((item) => item.markId) || [];
          } else {
            item.value = result[item.field];
          }
          return item;
        });
      }
    );

    const infoItemRef = ref([]);

    const setInfoItemRef = (el) => {
      infoItemRef.value.push(el);
    };

    const onSubmit = () => {
      let isPass = patientInfo.value.every((item, index) => {
        if (item.isRequire && !infoItemRef.value[index].currentValue.value) {
          Toast(`${item.label}不能为空`);
          return false;
        }
        return true;
      });

      if (!isPass) return;

      const resultData = {};
      patientInfo.value.forEach((item, index) => {
        resultData[item.field] =
          infoItemRef.value[index].currentValue.id ?? infoItemRef.value[index].currentValue.value;
      });

      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: '提交中...'
      });
      actions.hos
        .setPatientInfo(resultData)
        .then(() => {
          Toast.success('提交成功');

          setTimeout(() => {
            process.next();
          }, 800);
        })
        .finally(() => {
          toast.clear();
        });
    };

    return {
      onSubmit,
      patientInfo,
      infoItemRef,
      setInfoItemRef,
      userInfo
    };
  }
};
</script>

<style lang="scss" scoped>
.patient-info-page {
  background: #fff;
  min-height: 100vh;
}
.bed-info {
  padding: 32px 0 32px 32px;

  font-size: 30px;
  font-weight: 400;
  color: #777b8f;
  line-height: 52px;

  .bed-num {
    color: #373d52;
    font-size: 36px;
    margin-left: 10px;
  }
}
.patient-info-btn {
  margin: auto;
  margin-top: 80px;
  padding-bottom: 80px;
  width: 80%;
}
</style>